/*
 * @Author: jiayu
 * @Date: 2022-08-04 16:12:56
 * @LastEditors: jiayu
 * @LastEditTime: 2022-09-27 15:37:41
 * @Description:
 */
import Card from '@/components/Card';
import { instance } from '@/services/jy-api/api';
import { useOrganizationalStore } from '';
import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
import { Area } from '@ant-design/plots';
import { Button } from 'antd';
import React from 'react';
import { useModel } from '@umijs/max';
import { Dispatch, memo, SetStateAction, useEffect, useState } from 'react';
import { ChartSctionProps } from '../Section1';
import styles from './index.less';

const RightContentRender: React.FC<ChartSctionProps & {
  typeChange?: (val: string) => void
}> = (props) => {
  const { isModal, full, fullHandle } = props
  const click = () => {
    if (isModal) {
      full && full(false)
    } else {
      fullHandle && fullHandle('section2')
      full && full(true)
    }
  }
  return <div className={styles.rightToolBar}>
    <Button icon={isModal ? <FullscreenExitOutlined /> : <FullscreenOutlined />} onClick={click}></Button>
  </div>
}

const Index: React.FC<ChartSctionProps> = memo((props) => {
  const [avgNum, setAvgNum] = useState();
  const { currentDepartmentId } = useModel('organizational')
  const [config, setConfig] = useState<any>()
  const getData = () => {
    instance('/index/Screen/sign', {
      params: {
        department_id: currentDepartmentId,
        type: 4
      }
    }).then(data => {
      const config = {
        data: data.data.list.map((item: any) => {
          return {
            ...item,
            sign: item.sign.toString()
          }
        }),
        padding: 'auto',
        xField: 'date',
        yField: 'sign',
        xAxis: {
          tickCount: 5,
        },
        yAxis: {
          grid: {
            line: {
              style: {
                stroke: '#8291A9',
                lineWidth: 1,
                lineDash: [4, 5],
                strokeOpacity: 0.7,
              }
            }
          }
        },
        slider: {
          start: 0.,
          end: 1,
          textStyle: {
            fill: '#ffffff',
            fontSize: '16px',
            fontWeight: 'bold',
          }
        },
        areaStyle: () => {
          return {
            fill: 'l(270) 0:#ffffff 0.5:#FF8A48 1:#FF3D57',
            lineWidth: 5,
          };
        },
        line: {
          size: 4,
          color: 'l(270) 0:#0081FF 0.5#FF3D57 0.7#FF3D57 1:#FF8A48',
        },
      }
      setConfig(config)
      setAvgNum(data.data.num)
    })
  }
  useEffect(() => {
    if (currentDepartmentId) {
      getData()
    }
  }, [currentDepartmentId]);

  return (
    <div className={styles.section}>
      <Card TitleRnder="每日签到人数" RightContentRender={<RightContentRender {...props} />}>
        <div className={styles.average}>
          <div className={styles.label}>{avgNum}人</div>
          <div className={styles.val}>平均每天签到人数</div>
        </div>
        {
          config && <Area height={235} {...config} />
        }
      </Card>
    </div>
  );
});

export default Index;
